<template>
  <div>
    <div class="headimg">
      <img :src="outdata.image" alt="">
    </div>
    <div class="titleinfo">
      <div style="padding:10px; background-color:#FFF">
        <yd-flexbox>
          <div style="width:90%">
            <span style="font-size:20px">{{outdata.title}}</span>
          </div>
          <div @click="show2 = true" style="float:right;width:10%" v-if="outdata.book == '0'">
            <hd-svg-icon name="hd-keyuding" slot="left" size="30px" color="#FFA500"></hd-svg-icon>
          </div>
        </yd-flexbox>
      </div>
      <div style="padding-left:10px;background-color:#FFF">
        <span style="font-size:10px;color:#cccccc">自由行攻略 {{outdata.create_time}}</span>
      </div>
    </div>
    <div class="fuwenben">
      <div v-html="outdata.content"></div>
    </div>
    <yd-popup v-model="show2" position="bottom" height="65%" style="z-index:1">
      <div class="yudinghead">
        <div class="head">
          <img src="http://img1.3lian.com/2015/a1/43/d/152.jpg" alt="" style="width:50px; height:50px;border-radius: 50px;">
        </div>
        <div class="yudingname">EricLee</div>
        <div class="yudingline">更多精品线路</div>
      </div>
      <div class="yudingbody">
        <yd-flexbox>
          <div style="padding:5px">
            <hd-svg-icon name="hd-luxian-yuanquan" size="30px" color="#FFA500"></hd-svg-icon>
          </div>
          <div>可预订线路</div>
        </yd-flexbox>
      </div>
      <div class="yudingcontent" v-for="item in bookline" :key="item.index">
        <router-link :to="{path:'boutiquelineinfo',query: item}">
          <div>
          <yd-flexbox class="booklist">
            <div style="width:90%;" class="text-center">
              <span style="font-size:18px">{{item.product_name}}</span>
            </div>
            <div style="float:right;width:10%" v-if="outdata.book == '0'">
              <hd-svg-icon name="hd-keyuding" slot="left" size="30px" color="#FFA500"></hd-svg-icon>
            </div>
          </yd-flexbox>
          <yd-flexbox>
            <yd-flexbox-item style="padding-left:10px">出发城市: {{item.start_city_arr}}</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='0'">产品类型: 周边</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='1'">产品类型: 国内长线</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='2'">产品类型: 国内当地参团</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='3'">产品类型: 出境当地参团</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='4'">产品类型: 出境短线</yd-flexbox-item>
            <yd-flexbox-item v-if="item.product_type=='5'">产品类型: 出境长线</yd-flexbox-item>
          </yd-flexbox>
          <!-- <div style="height:30px;padding:5px"> -->
          <yd-flexbox>
            <yd-flexbox-item style="padding:5px 10px">成人价格:&nbsp¥{{item.min_adult_sale_price}}</yd-flexbox-item>
            <yd-flexbox-item>儿童价格:&nbsp¥{{item.min_children_sale_price}}</yd-flexbox-item>
          </yd-flexbox>
          </div>
          <!-- </div> -->
        </router-link>
      </div>
    </yd-popup>
  </div>  
</template>

<script>
export default {
  name: 'boutiquelinedetail',
  data() {
    return {
      outdata: [],
      show2: false,
      listdata: {},
      bookline: []
    };
  },
  mounted: function() {
    this.listdata = this.$route.query;
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.setLineInfo,
        data: {
          id: this.$route.query.id
        },
        success: resultData => {
          console.log(resultData);
          this.outdata = resultData.data;
        }
      });
      this.hdAjax({
        url: this.API.findHUDProductList,
        // method: 'post',
        data: {
          destination: decodeURI(this.$route.query.destination)
          // destination: 'huludao'
        },
        success: resultData => {
          console.log(resultData);
          this.bookline = resultData.data;
          // this.outdata = resultData.data;
        }
      });
    }
  }
};
</script>

<style>
body {
  font-family: "微软雅黑";
  background-color: #f0f0f0;
}
header {
  background-color: #393a3f;
}
.headimg img {
  width: 100%;
  height: 200px;
  position: relative;
}
.titleinfo {
  background-color: #fff;
  height: 80px;
  border-radius: 5px;
}
.fuwenben {
  margin-top: 5px;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}
.fuwenben img {
  width: 100%;
}
.yudinghead {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #BABABA;
  font-size:15px;
  position: relative;
}
.yudingname {
  padding-left:5px;
  padding-top:5px;
  color:#FFA500;
  font-weight:bold
}
.yudingline {
  padding-left:5px;
  padding-top:5px;
}
.yudingbody {
  height:40px;
  width:100%;
  border-bottom: 1px solid #BABABA;
  background-color:#EAEAEA;
  font-size:15px
}
.yudingcontent {
  width:100%;
  border-bottom: 1px solid #f2f2f2;
  font-size:15px;
}
.yudingcontent div {
  border-radius: 10px;
}
.head {
  background-color: greenyellow;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  right: 1px;
  top: -25px;
  position: absolute;
}
.booklist {
  padding: 5px;
}
</style>
